<template>
  <div class="con">
    <el-form ref="forma" :model="forma" :rules="forma" label-position="right">
      <el-row :gutter="4">
        <el-col :span="8">
          <el-form-item label="时间：" label-width="60px">
            <el-date-picker
              v-model="timeArray"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="专家名字：" label-width="100px" prop="name">
            <el-input v-model="forma.name" placeholder="请输入标题"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="padding-left:40px">
          <el-button type="primary" @click="showeAdd">新增</el-button>
          <el-button type="primary" @click="currentChange(1)">查询</el-button>
          <el-button type="primary" @click="resetForm('forma')">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <el-table id="dataTable" :data="dataTable" border max-height="650" style="margin-top:20px">
      <el-table-column prop="name" label="专家名字" width="120" align="center"></el-table-column>
      <!-- <el-table-column prop="zjzc" label="专家职称" width="120" align="center"></el-table-column> -->
      <!-- <el-table-column prop="goodat" label="专家擅长" width="180" align="center" show-overflow-tooltip></el-table-column> -->
      <el-table-column prop="mzsj" label="门诊时间" width="250" align="center" show-overflow-tooltip></el-table-column>
      <!-- <el-table-column prop="xl" label="学历" width="120" align="center"></el-table-column> -->
      <!-- <el-table-column prop="ylcg" label="医疗成果" width="180" align="center" show-overflow-tooltip></el-table-column> -->
      <el-table-column prop="ysjs" label="医生介绍"  align="center">
        <template slot-scope="{row}">
          <el-popover
            placement="top-start"
            title="医生介绍"
            width="300"
            trigger="hover"
            :content="row.ysjs"
          >
            <div
              slot="reference"
              style="white-space: nowrap;overflow: hidden;text-overflow:ellipsis;"
            >{{row.ysjs}}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="zpurl" label="照片" width="180" align="center">
        <template slot-scope="{row}">
          <img :src="row.zpurl" style="height:90px" />
        </template>
      </el-table-column>
      <el-table-column prop="adduser" label="添加人" width="120" align="center"></el-table-column>
      <el-table-column prop="fbsj" label="创建日期" width="120" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="240">
        <template slot-scope="scope">
          <div>
            <el-button
              class="operation"
              type="primary"
              size="mini"
              @click="showeEdit(scope.$index, scope.row)"
            >修改</el-button>
            <el-button
              class="operation"
              type="danger"
              size="mini"
              @click="showDelte(scope.$index, scope.row)"
            >删除</el-button>
            <el-button
              class="operation"
              type="info"
              size="mini"
              @click="showDetail(scope.$index, scope.row)"
            >详情</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      style="margin-top: 20px;text-align:center"
      background
      :current-page="listQuery.page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="listQuery.limit"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChange"
      @current-change="currentChange"
      :total="listQuery.total"
    ></el-pagination>

    <!-- 新增弹窗 -->
    <el-dialog
      title="添加传承之路"
      :visible.sync="addDialogVisible"
      width="60%"
      center
      class="upload-div"
    >
      <el-form ref="addForm" :model="addForm" :rules="rules" label-width="100px">
        <el-form-item label="专家名字：" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
        <el-form-item label="门诊时间：" prop="mzsj">
          <el-input v-model="addForm.mzsj"></el-input>
        </el-form-item>
        <!-- <el-form-item label="专家职称：" prop="zjzc">
          <el-input v-model="addForm.zjzc"></el-input>
        </el-form-item>
        <el-form-item label="医疗成果：" prop="ylcg">
          <el-input v-model="addForm.ylcg"></el-input>
        </el-form-item>
        <el-form-item label="专家擅长：" prop="goodat">
          <el-input v-model="addForm.goodat"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="作者：" prop="adduser">
          <el-input v-model="addForm.adduser" :disabled="true"></el-input>
        </el-form-item>-->
        <el-form-item label="图片：" prop="content">
          <el-upload
            class="upload-demo"
            :action="action"
            :before-upload="beforeupload"
            :on-change="handleChange"
            :show-file-list="false"
            :http-request="httprequest"
            :file-list="fileList"
            list-type="picture-card"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="医生介绍：" prop="ysjs">
          <Editor class="editer" v-model="addForm.ysjs" />
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button type="primary" @click="addSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog
      title="修改传承之路"
      :visible.sync="editDialogVisible"
      width="60%"
      center
      class="upload-div"
    >
      <el-form ref="editForm" :model="editForm" :rules="rules" label-width="100px">
        <el-form-item label="专家名字：" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="门诊时间：" prop="mzsj">
          <el-input v-model="editForm.mzsj"></el-input>
        </el-form-item>
        <!-- <el-form-item label="专家职称：" prop="zjzc">
          <el-input v-model="editForm.zjzc"></el-input>
        </el-form-item>
        <el-form-item label="医疗成果：" prop="ylcg">
          <el-input v-model="editForm.ylcg"></el-input>
        </el-form-item>
        <el-form-item label="专家擅长：" prop="goodat">
          <el-input v-model="editForm.goodat"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="作者：" prop="adduser">
          <el-input v-model="editForm.adduser"></el-input>
        </el-form-item>-->
        <el-form-item label="图片：" prop="content">
          <el-upload
            class="upload-demo"
            :action="action"
            :before-upload="beforeupload"
            :on-change="handleChange"
            :show-file-list="false"
            :http-request="httprequest"
            :file-list="fileList"
            list-type="picture-card"
          >
            <img v-if="editForm.zpurl" :src="editForm.zpurl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="医生介绍：" prop="ysjs">
          <Editor class="editer" v-model="editForm.ysjs" />
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-button type="primary" @click="editSubmit">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 查看弹窗 -->
    <el-dialog title="查看传承之路" :visible.sync="detailDialogVisible" width="60%" center>
      <el-form ref="detailForm" :model="detailForm" label-width="100px">
        <el-form-item label="专家名字：" prop="name">
          <span>{{detailForm.name}}</span>
        </el-form-item>
        <el-form-item label="门诊时间：" prop="mzsj">
          <span>{{detailForm.mzsj}}</span>
        </el-form-item>
        <!-- <el-form-item label="专家职称：" prop="mzsj">
          <span>{{detailForm.zjzc}}</span>
        </el-form-item>
        <el-form-item label="医疗成果：" prop="mzsj">
          <span>{{detailForm.ylcg}}</span>
        </el-form-item>
        <el-form-item label="专家擅长：" prop="mzsj">
          <span>{{detailForm.goodat}}</span>
        </el-form-item> -->
        <!-- <el-form-item label="作者：" prop="adduser">
          <span>{{detailForm.adduser}}</span>
        </el-form-item>-->
        <el-form-item label="图片：" prop="content">
          <div>
            <img :src="detailForm.zpurl" style="height:200px" />
          </div>
        </el-form-item>
        <el-form-item label="医生介绍：" prop="ysjs">
          <span v-html="detailForm.ysjs" class="showdia">{{detailForm.ysjs}}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { myMixin } from "../../assets/js/mixin";
import Editor from "../../components/Editor";
export default {
  mixins: [myMixin],
  components: { Editor },
  filters: {},
  props: {
    type: String, // add edit
  },
  data() {
    return {
      timeArray: [],
      forma: {
        name: "",
      },
      listQuery: {
        page: 1, //页码
        limit: 10, //每页条数
        total: 0,
      },
      //表单验证
      rules: {
        name: [{ required: true, message: "请输入专家名字", trigger: "blur" }],
        ysjs: [
          { required: true, message: "请输入详细医生介绍", trigger: "blur" },
        ],
        mzsj: [{ required: true, message: "请输入门诊时间", trigger: "blur" }],
        zjzc: [{ required: false, message: "请输入门诊时间", trigger: "blur" }],
        ylcg: [{ required: false, message: "请输入门诊时间", trigger: "blur" }],
        goodat: [{ required: false, message: "请输入门诊时间", trigger: "blur" }],

      },
      dataTable: [],
      // 新增弹框
      addDialogVisible: false,
      addForm: {
        name: "",
        mzsj: "",
        // adduser: "",
        content: "",
        ysjs: "",
        zjzc: "",
        ylcg: "",
        goodat: "",
      },
      // 修改弹框
      editDialogVisible: false,
      editForm: {
        name: "",
        mzsj: "",
        // adduser: "",
        content: "",
        ysjs: "",
        zjzc: "",
        ylcg: "",
        goodat: "",
      },
      // 查看
      detailDialogVisible: false,
      detailForm: {
        name: "",
        mzsj: "",
        // adduser: "",
        content: "",
        ysjs: "",
        zjzc: "",
        ylcg: "",
        goodat: "",
      },
      // 图片数据
      imageUrl: "",
      action: "", //上传接口 例子中接口需要封装formdata上传
      fileList: [],
      imgname: "",
    };
  },
  created() {
    this.search();
    // this.addForm.adduser = JSON.parse(window.localStorage.user).uRealName;
  },
  methods: {
    //查询请求
    search() {
      let query = this.queryDate();
      this.handleSearch(query, "TCM/cczl");
      console.log(this.dataTable);
    },
    // 重置
    resetForm() {
      this.$refs.forma.resetFields();
      this.timeArray = [];
    },
    // 搜索的请求参数
    queryDate() {
      let query = {
        ...this.forma,
        page: this.listQuery.page,
        limit: this.listQuery.limit,
      };
      if (this.timeArray && this.timeArray.length == 2) {
        query.orderCreateQueryStart = this.timeArray[0];
        query.orderCreateQueryEnd = this.timeArray[1];
      }
      return query;
    },
    addQuery(form) {
      let query = {
        ...this.addForm,
        adduser: JSON.parse(window.localStorage.user).uRealName, //
        id: "",
        zpurl: this.imageUrl, // 图片
      };
      return query;
    },
    sizeChange(pageSize) {
      this.listQuery.limit = pageSize;
      this.currentChange(1);
    },
    currentChange(pageNum) {
      this.listQuery.page = pageNum;
      this.search();
    },
    showeAdd() {
      this.addDialogVisible = true;
    },
    addSubmit() {
      let query = this.addQuery();
      this.handleAdd(query, "UpdTCM/cczl");
      // 图片清空
      this.$refs.addForm.resetFields();
      this.imageUrl = "";
    },
    showeEdit(id, row) {
      this.editDialogVisible = true;
      this.editForm = JSON.parse(JSON.stringify(this.dataTableOrigin[id])); //
    },
    editSubmit() {
      let query = {
        ...this.editForm,
        adduser: JSON.parse(window.localStorage.user).uRealName, //
        zpurl: this.editForm.zpurl, // 图片
      };
      this.handleEdit(query, "UpdTCM/cczl");
      this.$refs.editForm.resetFields();
      this.imageUrl = "";
    },
    showDetail(id, row) {
      this.detailDialogVisible = true;
      this.detailForm = JSON.parse(JSON.stringify(this.dataTableOrigin[id])); //
      console.log(this.detailForm);
    },
    showDelte(id, row) {
      let query = {
        type: "4",
        id: row.id.toString(),
      };
      // 删除接口
      this.handleDelete(query, "UpdTCM/delDetail");
      // this.search();
    },
    // 图片上传方法
    //阻止upload的自己上传，进行再操作
    beforeupload(file) {
      console.log(file);
      this.imgname = file.name;
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      } else {
        //创建临时的路径来展示图片
        var windowURL = window.URL || window.webkitURL;
        this.imageUrl = windowURL.createObjectURL(file);
        this.param = new FormData();
        this.param.append("Files", file);
      }
      return isLt2M;
    },
    httprequest() {
      var that = this;
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      let query = this.param;
      console.log(query);
      axios({
        method: "post",
        url: "http://111.229.255.208:8004/api/Upload/ImgUpload",
        data: query,
        headers: {
          "Content-Type": "multipart/form-data",
        },
      }).then((res) => {
        if (res.data.success) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.imageUrl = res.data.value;
          this.editForm.zpurl = res.data.value; //图片
        } else {
          this.$message({
            message: res.data.message,
            type: "error",
          });
        }
      });
    },
    handleChange(fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]];
      }
    },
  },
};
</script>

<style>
.page-container {
  font-size: 25px;
  text-align: center;
  color: rgb(192, 204, 218);
}
.con {
  padding: 10px 20px 0;
}

.upload-div .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.upload-div .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.upload-div .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 146px;
  height: 146px;
  line-height: 146px;
  text-align: center;
}
.upload-div .avatar {
  width: 100% !important;
  height: 146px !important;
  display: block;
}

.disabled .el-upload--picture-card {
  display: none;
}
</style>
